<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <!-- js导入 -->
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
  <!-- css 导入 -->
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <script type="text/javascript">
       var  index ;
       $(function(){
    	    //  加载 datagrid 数据    
    	   $('#dg').datagrid({ 

    		   url:'emp.json', 

    		   columns:[[ 

    		   {field:'empno',title:'empno',width:100,editor:{
    			   type:"validatebox",
    			   options:{required:true}
    		   }}, 

    		   {field:'ename',title:'ename',width:100,editor:{
    			   type:"validatebox",
    			   options:{required:true}
    		   }}, 

    		   {field:'job',title:'job',width:100,align:'right',editor:{
    			   type:"validatebox",
    			   options:{required:true}
    		   }} 

    		   ]] ,
    		   toolbar: [
{  		
	   iconCls: 'icon-add',  		
	   handler: function(){
		   //插入一行
		   $('#dg').datagrid('insertRow',{
			  	index: 0,	// index start with 0
			  	row: {}
			  });  
	   }  	
	   },'-',{  		
    			   iconCls: 'icon-cancel',  		
    			   handler: function(){
    				   //  打开取消编辑
    				   $("#dg").datagrid("cancelEdit",index);
    			   }  	
    			   },'-',{  		
    			   iconCls: 'icon-save',  		
    			   handler: function(){
    				   //  结束编辑  编辑之后结束编辑
    				   $("#dg").datagrid("endEdit",index);
    			   }  	
    			   }] , 
    			   pagination:true,
    			   pageList:[1,2,3],
    			   onBeforeEdit:function(rowIndex, rowData){
    				   alert(rowData.empno+"----beforeEdit----");
    			   }
    			   ,
    			   //   编辑之后 调用事件
    			   onAfterEdit:function(rowIndex, rowData){
    				alert("rowIndex  " +index);//  发送数据请求给后台
    			   }
    			   ,
    			   onDblClickRow:function(rowIndex, rowData){
    				   //  开启行编辑方法    
    				    index = rowIndex;
    		    	    $("#dg").datagrid("beginEdit",rowIndex);
    			   }
    	   
    		   }); 
    	    
    	   
    	    

       });
    </script>
  
</head>
<body>

<h2>纯js 完成数据表格</h2>
<table id="dg"></table>


</body>
</html>